<template>
<div id="Shops">
  <van-search v-model="searchValue" placeholder="请输入门店名称" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="shop-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <img :src="item.shopPhotUrl" class="shop-img"/>
        <div class="shop-right">
          <div class="shop-row">
            <span>门店编号:{{ item.shopId }}</span>
            <span class="ft-blue" @click.stop="changeStatus( item )" v-if="$store.state.userInfo.roleType !== 3">{{ item.status ? '启用' : '停用' }}</span>
            <span class="ft-blue" @click.stop="$router.push({ name: 'ShebeiBang', query: { shopId: item.shopId, shopName: item.shopName } })" v-if="$store.state.userInfo.roleType !== 3">绑定设备</span>
            <span class="ft-blue" @click.stop="$router.push({ name: 'ShebeiList', query: { shopId: item.shopId, shopName: item.shopName } })" v-if="$store.state.userInfo.roleType !== 3">查看设备</span>
          </div>
          <div class="shop-row">
            <span>{{ item.shopName }}</span>
            <span class="ft-blue" @click.stop="modify( item )" v-if="$store.state.userInfo.roleType !== 3">修改</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="订单详情" left-arrow @click-left="blank.show = false"/>
      <van-cell-group>
        <van-field readonly label="门店名称"     :value="info.shopName"/>
        <van-field readonly label="门店联系电话" :value="info.shopTele"/>
        <van-field readonly label="门店地址"     :value="info.shopSite"/>
        <van-field readonly label="所在区域"     :value="info.region"/>
        <van-field readonly label="计费时间"     :value="info.chargeTime"/>
        <van-field readonly label="计费单位"     :value="info.chargeUnit ? '分钟' : '小时'"/>
        <van-field readonly label="计费金额"     :value="info.chargeMoney + '元'"/>
        <van-field readonly label="免费时长"     :value="info.freeTime + '分钟'"/>
        <van-field readonly label="最高消费"     :value="info.highest + '元'"/>
        <van-field readonly label="经度"         :value="info.longitude"/>
        <van-field readonly label="纬度"         :value="info.latitude"/>
        <van-field readonly label="营业时间"     :value="info.shopHours"/>
      </van-cell-group>
    </div>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class Shops extends Vue {

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  
  getList() {
    let page = this.page, size = 10, userId = this.$store.state.userInfo.userId;
    let query: any = { page, size, userId };
    if(this.searchValue) query.shopName = this.searchValue;
    axios.get('/api/ShopManageController/getShopManageList', query).then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }
  
  modify(shop: any) {
    this.$router.push({ name: 'AddMendian', query: { type: 'modify' }, params: shop });
  }

  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }

  blank: any = {
    show: false,
    list: []
  }
  info: any = {}
  showBlank(item: any) {
    this.info = JSON.parse( JSON.stringify( item ) );
    this.blank.show = true;   
  }

  changeStatus(item: any) {    
    this.$dialog.confirm({ message: `您确认要${ item.status ? '启用' : '停用' } ${ item.shopName } 吗？` }).then(() => {
      let shopManageIdList = item.shopId, status = item.status ? 0 : 1;
      axios.post('/api/ShopManageController/nableDisableeShopList', { query: { shopManageIdList, status } }).then((res: any) => {        
        this.$toast(`${ item.status ? '启用' : '停用' }成功！`);
        this.$router.go(0);
      });
    })
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#Shops {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .shop-box {
    width: 6.7rem;
    height: 1.4rem;
    margin: 0.2rem auto;
    background: #fff;
    box-shadow: 1px 1px 2px 1px #dedede;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-radius: 0.04rem;
    .shop-img { 
      width: 0.8rem;
      height: 0.8rem;
    }
    .shop-right {
      width: 5.3rem;
      height: 1.1rem;
      .shop-row {
        height: 0.54rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 0.26rem;
        span {
          display: block;
          padding: 0.1rem; 
        }
      }
    }
  }
}
</style>

